<template>
  <div class="app-container">
    <HomeHeader />
    <div class="music-container has-player">
      <LeftSider />
      <div class="main-content">
        <!-- 轮播图区域 -->
        <div class="banner-container">
          <el-carousel height="200px" :interval="4000" type="card">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.imageUrl" :alt="item.title" class="banner-image" />
              <div class="banner-title">{{ item.title }}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
        
        <!-- 主要内容区域分为两个盒子 -->
        <div class="main-sections">
          <!-- 左侧盒子：精选歌单区域 -->
          <div class="left-section">
            <!-- 标题区域盒子 -->
            <div class="section-header">
              <h2>精选歌单</h2>
              <span class="more" @click="$router.push('/music/selected-playlists')">更多 ></span>
            </div>
            <!-- 歌单内容区域盒子 -->
            <div class="playlist-grid">
              <!-- 大卡片盒子 -->
              <div class="playlist-card large" v-if="selectedPlaylists[0]">
                <div class="playlist-cover">
                  <img :src="selectedPlaylists[0].cover" :alt="selectedPlaylists[0].title">
                  <div class="play-count">
                    <i class="fas fa-play-circle"></i>
                    {{ formatPlayCount(selectedPlaylists[0].playCount) }}
                  </div>
                  <div class="play-btn">
                    <i class="fas fa-play-circle"></i>
                  </div>
                </div>
                <div class="playlist-title">{{ selectedPlaylists[0].title }}</div>
              </div>
              <!-- 小卡片区域盒子 -->
              <div class="small-cards-container">
                <!-- 上下两行小卡片 -->
                <div class="small-cards-row" v-for="row in 2" :key="row">
                  <div class="playlist-card small" 
                       v-for="(item, index) in selectedPlaylists.slice(1 + (row-1)*2, 1 + row*2)" 
                       :key="item.id">
                    <div class="playlist-cover">
                      <img :src="item.cover" :alt="item.title">
                      <div class="play-count">
                        <i class="fas fa-play-circle"></i>
                        {{ formatPlayCount(item.playCount) }}
                      </div>
                      <div class="play-btn">
                        <i class="fas fa-play-circle"></i>
                      </div>
                      <div class="mask"></div>
                    </div>
                    <div class="playlist-title">{{ item.title }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧盒子：热门榜单区域 -->
          <div class="right-section">
            <div class="rank-section">
              <!-- 标题和更多 -->
              <div class="rank-header">
                <h2>热门榜单</h2>
                <span class="more" @click="$router.push('/music/popular-playlists')">更多 ></span>
              </div>
              <!-- 榜单列表 -->
              <div class="rank-list">
                <!-- 每个榜单项 -->
                <div class="rank-item" v-for="(item, index) in rankList" :key="item.id">
                  <!-- 左侧图标 -->
                  <div class="rank-icon-wrapper">
                    <div class="rank-icon" :class="`bg-${index + 1}`">
                      {{ item.title }}
                      <div class="play-btn">
                        <i class="fas fa-play-circle"></i>
                      </div>
                    </div>
                  </div>
                  <!-- 右侧歌曲列表 -->
                  <div class="song-list">
                    <div v-for="(song, idx) in item.songs" :key="idx" class="song-item">
                      <div class="song-index">{{ idx + 1 }}.</div>
                      <div class="song-name">{{ song }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 次内容区 -->
        <div class="sub-sections">
          <div class="new-songs-and-mv">
            <!-- 新歌首发 -->
            <div class="new-songs-section">
              <!-- 标题和分类 -->
              <div class="section-header">
                <h2>新歌首发</h2>
                <div class="category-tabs">
                  <span 
                    v-for="tab in ['华语', '欧美', '韩国', '日本']" 
                    :key="tab"
                    class="tab"
                    :class="{ active: activeTab === tab }"
                    @click="handleTabClick(tab)"
                  >
                    {{ tab }}
                    <i v-if="activeTab === tab" class="fas fa-play-circle"></i>
                  </span>
                </div>
                <div class="page-info">
                  <i 
                    class="fas fa-chevron-left" 
                    :class="{ disabled: currentPage === 1 }"
                    @click="handlePageChange('prev')"
                  ></i>
                  <span>{{ currentPage }}/{{ totalPages }}</span>
                  <i 
                    class="fas fa-chevron-right"
                    :class="{ disabled: currentPage === totalPages }"
                    @click="handlePageChange('next')"
                  ></i>
                </div>
              </div>
              <!-- 歌曲列表 -->
              <div class="songs-list">
                <div class="song-item" v-for="(song, index) in newSongs" :key="index">
                  <div class="song-cover">
                    <img :src="song.cover" :alt="song.title">
                  </div>
                  <div class="song-info">
                    <div class="song-title">{{ song.title }}</div>
                    <div class="song-artist">{{ song.artist }}</div>
                  </div>
                  <div class="song-actions">
                    <div class="download-btn" @click="playNewSong(song)">
                      <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="download-btn" @click="downloadNewSong(song)">
                      <i class="fas fa-download"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 推荐MV区域 -->
            <div class="mv-section">
              <div class="section-header">
                <h2>推荐MV</h2>
                <span class="more" @click="$router.push('/music/recommendation-mv')">更多 ></span>
              </div>
              <div class="mv-list">
                <!-- 大MV卡片 -->
                <div class="mv-card large">
                  <div class="mv-cover">
                    <img :src="mvList[0].cover" :alt="mvList[0].title">
                    <div class="mv-info">
                      <div class="mv-title">{{ mvList[0].title }}</div>
                      <div class="mv-artist">{{ mvList[0].artist }}</div>
                    </div>
                    <div class="play-btn">
                      <i class="fas fa-play-circle"></i>
                    </div>
                  </div>
                </div>
                <!-- 小MV卡片 -->
                <div class="small-mv-cards">
                  <div 
                    class="mv-card small" 
                    v-for="(mv, index) in mvList.slice(1)" 
                    :key="index"
                  >
                    <div class="mv-cover">
                      <img :src="mv.cover" :alt="mv.title">
                      <div class="mv-info">
                        <div class="mv-title">{{ mv.title }}</div>
                        <div class="mv-artist">{{ mv.artist }}</div>
                      </div>
                      <div class="play-btn">
                        <i class="fas fa-play-circle"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <MusicPlay ref="musicPlayerRef" />
  </div>
</template>

<script setup lang="ts">
// 引入首页头部部分
import HomeHeader from '@/components/home-header.vue'
import LeftSider from './components/left-sider.vue'
import MusicPlay from '@/components/music-play.vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

import { ref, computed } from 'vue'
import {
  HomeFilled,
} from '@element-plus/icons-vue'

// 获取音乐播放器组件实例
const musicPlayerRef = ref()

const router = useRouter()

// 轮播图数据
const bannerList = ref([
  {
    id: 1,
    imageUrl: 'https://imgessl.kugou.com/commendpic/20250302/20250302210812594613.jpg',
    title: '宋亚轩 -  spr.'
  },
  {
    id: 2,
    imageUrl: 'https://imgessl.kugou.com/commendpic/20250302/20250302192545826023.jpg',
    title: '檀健次 - 傲慢与偏见'
  },
  {
    id: 3,
    imageUrl: 'https://imgessl.kugou.com/commendpic/20250302/20250302192051486912.jpg',
    title: '张远-   不顾'
  },
  {
    id: 4,
    imageUrl: 'http://p1.music.126.net/nkGZqQLgzf2P_Tyk7of7vQ==/109951170535101240.jpg',
    title: '早安- 愉快的复仇'
  }
])

// 精选歌单数据
const selectedPlaylists = ref([
  {
    id: 1,
    title: '【韩语R&B】冬日暖床的一缕暖阳',
    cover: 'https://imgessl.kugou.com/custom/480/20201130/20201130102202711153.png',
    playCount: 720000
  },
  {
    id: 2,
    title: '压迫感十足的重型歌，准备好了吗？',
    cover: 'https://imgessl.kugou.com/custom/150/20230111/20230111231956889386.jpg',
    playCount: 4090000
  },
  {
    id: 3,
    title: '【精选】欧美轻点混/剧情向bgm',
    cover: 'https://imgessl.kugou.com/custom/150/20211003/20211003160121133185.jpg',
    playCount: 10180000
  },
  {
    id: 4,
    title: '【静心纯音乐】静下心来看书吧',
    cover: 'https://imgessl.kugou.com/custom/150/20211116/20211116181403988547.jpg',
    playCount: 15400000
  },
  {
    id: 5,
    title: '【打游戏必备】感受这场盛宴',
    cover: 'https://imgessl.kugou.com/soft/collection/150/20190123/20190123112145904886.jpg',
    playCount: 6370000
  }
])

// 热门榜单数据
const rankList = ref([
  {
    id: 1,
    title: '热升榜',
    cover: 'https://www.kugou.com/common/images/rank_i1_v20.png',
    songs: [
      '小瑜 - 平凡日子里的诗',
      '方大同 - 才二十三',
      '方大同 - 爱爱爱'
    ]
  },
  {
    id: 2,
    title: 'TOP500',
    cover: 'https://www.kugou.com/common/images/rank_i2_v20.png',
    songs: [
      '方大同 - 特别的人',
      'LBI利比 (时拍尘) - ...',
      'G.E.M. 邓紫棋 - 唯一'
    ]
  },
  {
    id: 3,
    title: '抖音热歌榜',
    cover: 'https://www.kugou.com/common/images/rank_i3_v20.png',
    songs: [
      '李要红Redli - Kiss Kiss',
      '于冬然 - 座位',
      '容祖儿 - 没关系'
    ]
  }
])

// 格式化播放次数
const formatPlayCount = (count: number) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count.toString()
}

// 新歌数据按语种分类
const songsByCategory = ref({
  华语: [
    {
      title: '日不落',
      artist: '蔡依林',
      cover: 'http://p2.music.126.net/Yu--DIhsQSoei6XQTrSUNA==/109951163200168756.jpg',
      url:'https://music.163.com/song/media/outer/url?id=209643.mp3',
      duration:'03:48'
    },
    {
      title: '才二十三',
      artist: '方大同',
      cover: 'http://p2.music.126.net/dlsDdLopwJrE8JlWgWbaOA==/109951170031584299.jpg',
      url:'https://music.163.com/song/media/outer/url?id=2619125556.mp3',
      duration:'03:44'
    },
    {
      title: '像我这样的人',
      artist: '毛不易',
      cover: 'http://p1.music.126.net/vmCcDvD1H04e9gm97xsCqg==/109951163350929740.jpg',
      url:"https://music.163.com/song/media/outer/url?id=569213220.mp3",
      duration:'03:27'
    },
    {
      title: '吻别',
      artist: '张学友',
      cover: 'http://p1.music.126.net/SdTc04hSVuAUeFqErhvGDw==/109951165686347824.jpg',
      url:'https://music.163.com/song/media/outer/url?id=189983.mp3',
      duration:'05:02'
    },
  ],
  欧美: [
    {
      title: 'As Long As You Love Me',
      artist: 'Backstreet Boys',
      cover: 'http://p1.music.126.net/XoaGQIIdlU3x9nfI_LFdMA==/2436517767215780.jpg',
      url:'https://music.163.com/song/media/outer/url?id=27491634.mp3',
      duration:'03:34'
    },
    {
      title: 'O Holy Night',
      artist: 'Céline Dion',
      cover: 'http://p2.music.126.net/syepyXoH2t4GY_f870ew6g==/109951165989593469.jpg',
      url:'https://music.163.com/song/media/outer/url?id=16869562.mp3',
      duration:'05:20'
    },
    {
      title: '360',
      artist: 'Charli xcx',
      cover: 'http://p2.music.126.net/U8geVbDFLBRxwiPOzYjPUg==/109951169659830623.jpg',
      url:'https://music.163.com/song/media/outer/url?id=2163845903.mp3',
      duration:'02:13'
    },
    {
      title: 'Angry',
      artist: 'The Rolling Stones',
      cover: 'http://p1.music.126.net/2c3rNI5LFl1BNtyKP37UnQ==/109951168995821274.jpg',
      url:'https://music.163.com/song/media/outer/url?id=2092472647.mp3',
      duration:'03:46'
    }
  ],
  韩国: [
    {
      title: 'Do What You Do',
      artist: 'BAEKHYUN / UMI / 张利贞',
      cover: 'http://p1.music.126.net/rfLBtQpZzVetrzs6vczW2A==/109951170525875446.jpg',
      url:'https://music.163.com/song/media/outer/url?id=2679690725.mp3',
      duration:'02:59'
    },
    {
      title: 'My Destiny',
      artist: '东方神起',
      cover: 'http://p1.music.126.net/nwdY783pCIdygvJfIsiDcg==/109951168228993276.jpg',
      url:'https://music.163.com/song/media/outer/url?id=2013951850.mp3',
      duration:'05:10'
    },
    {
      title: 'BANG BANG BANG+FANTASTIC BABY',
      artist: 'G-DRAGON',
      cover: 'http://p1.music.126.net/4K5UD5TyiBMFA4unSXW4Mg==/109951170187454794.jpg',
      url:'https://music.163.com/song/media/outer/url?id=2650049155.mp3',
      duration:'03:23'
    },
    {
      title: '불꽃',
      artist: '高耀太',
      cover: 'http://p1.music.126.net/xDyR0LjLOZef0tclI9HIlw==/109951168907810142.jpg',
      url:'https://music.163.com/song/media/outer/url?id=5376679.mp3',
      duration:'03:54'
    }
  ],
  日本: [
    {
      title: 'めぐる季節',
      artist: '久石譲 / 奥户巴寿',
      cover: 'http://p2.music.126.net/4j5XwZmX3qvAgRgjfgJ03A==/109951169496145653.jpg',
      url:'https://music.163.com/song/media/outer/url?id=443521.mp3',
      duration:'04:20'
    },
    {
      title: 'Butter-Fly',
      artist: '和田光司',
      cover: 'http://p1.music.126.net/3DvLLI1WRoE9Lpe65b3d4Q==/109951163825561983.jpg',
      url:'https://music.163.com/song/media/outer/url?id=28850500.mp3',
      duration:'04:18'
    },
    {
      title: 'brave heart',
      artist: '宮崎歩',
      cover: 'http://p2.music.126.net/OX7OzqN8IFfvUBNIYQkokg==/109951163460407776.jpg',
      url:'https://music.163.com/song/media/outer/url?id=29816860.mp3',
      duration:'04:12'
    },
  ]
})

// 当前选中的标签
const activeTab = ref('华语')
// 当前页码
const currentPage = ref(1)
const totalPages = computed(() => {
  const allSongs = songsByCategory.value[activeTab.value] || []
  return Math.ceil(allSongs.length / 10)
})

// 根据当前选中标签获取对应的歌曲列表
const newSongs = computed(() => {
  const allSongs = songsByCategory.value[activeTab.value] || []
  const startIndex = (currentPage.value - 1) * 10
  const endIndex = startIndex + 10
  return allSongs.slice(startIndex, endIndex)
})

// 切换标签
const handleTabClick = (tab: string) => {
  activeTab.value = tab
  currentPage.value = 1 // 切换标签时重置页码
}

// 切换页码
const handlePageChange = (direction: 'prev' | 'next') => {
  if (direction === 'prev' && currentPage.value > 1) {
    currentPage.value--
  } else if (direction === 'next' && currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 播放新歌
const playNewSong = (song: any) => {
  musicPlayerRef.value?.addAndPlaySong(song)
}

// 下载新歌
const downloadNewSong = async (song: any) => {
  try {
    const response = await fetch(song.url)
    if (!response.ok) throw new Error('下载失败')
    
    const blob = await response.blob()
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${song.title}.mp3`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败，请稍后重试')
  }
}

// 推荐MV数据
const mvList = ref([
  {
    title: '十分钟',
    artist: '张韶涵',
    cover: 'https://imgessl.kugou.com/mvhdpic/400/20250218/20250218174548260691.jpg'
  },
  {
    title: 'Dreamers',
    artist: 'Eric周兴哲、Gummy B',
    cover: 'https://imgessl.kugou.com/mvhdpic/400/20250303/20250303023605952552.jpg'
  },
  {
    title: 'LIKE U 100',
    artist: 'Gyubin',
    cover: 'https://imgessl.kugou.com/mvhdpic/400/20250227/20250227114836178491.jpg'
  }
])

// 可选：添加导航方法
const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
// 先定义通用的 mixin
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.music-container {
  display: flex;
  flex: 1;
  &.has-player {
    min-height: calc(100vh - 60px - 70px);
    height: auto;
  }
  
  background-color: #f5f5f5;
  overflow-y: auto;
  
  .main-content {
    flex: 1;
    padding: 20px;
    padding-bottom: 90px;
  }
}

.main-sections {
  display: flex;
  margin-top: 30px;
  gap: 20px;

  .left-section {
    flex: 1;
    min-width: 0;
    max-width: 900px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h2 {
        font-size: 24px;
        font-weight: 600;
        color: #333;
      }

      .more {
        color: #999;
        font-size: 13px;
        cursor: pointer;
      }
    }

    .playlist-grid {
      display: flex;
      gap: 20px;

      .playlist-card {
        &.large {
          width: 500px;
          
          .playlist-cover {
            width: 500px;
            height: 378px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .play-count {
              position: absolute;
              top: 8px;
              right: 8px;
              background: rgba(0, 0, 0, 0.5);
              color: white;
              padding: 2px 8px;
              border-radius: 12px;
              font-size: 13px;
              display: flex;
              align-items: center;
              gap: 4px;
            }

            .play-btn {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0.8);
              width: 50px;
              height: 50px;
              background: rgba(255, 255, 255, 0.9);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: all 0.3s ease;
              z-index: 1;
              cursor: pointer;

              i {
                font-size: 24px;
                color: #2d8cf0;
              }
            }

            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: rgba(0, 0, 0, 0.2);
              opacity: 0;
              transition: opacity 0.3s ease;
            }
          }

          .playlist-title {
            margin-top: 12px;
            font-size: 14px;
            color: #333;
          }
        }

        &:hover {
          .playlist-cover {
            img {
              transform: scale(1.1);
            }

            .play-btn {
              opacity: 1;
              transform: translate(-50%, -50%) scale(1);
            }

            &::after {
              opacity: 1;
            }
          }
        }
      }

      .small-cards-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .small-cards-row {
          display: flex;
          gap: 20px;
          height: 198px;

          .playlist-card.small {
            flex: 1;
            width: 160px;
            
            .playlist-cover {
              width: 100%;
              height: 160px;
              border-radius: 8px;
              overflow: hidden;
              position: relative;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .play-count {
                position: absolute;
                top: 6px;
                right: 6px;
                background: rgba(0, 0, 0, 0.5);
                color: white;
                padding: 1px 6px;
                border-radius: 10px;
                font-size: 12px;
              }

              .play-btn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.8);
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all 0.3s ease;
                z-index: 2;
                cursor: pointer;

                i {
                  font-size: 20px;
                  color: #2d8cf0;
                }
              }

              .mask {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.2);
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 1;
              }
            }
            &:hover {
              .playlist-cover {
                img {
                  transform: scale(1.1);
                }

                .play-btn {
                  opacity: 1;
                  transform: translate(-50%, -50%) scale(1);
                }

                &::after {
                  opacity: 1;
                }
              }
            }


            .playlist-title {
              margin-top: 8px;
              font-size: 13px;
              line-height: 1.5;
              height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
          }
        }
      }
    }
  }

  .right-section {
    width: 350px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
  }
}

.banner-container {
  width: 100%;
  margin-top: 20px;

  :deep(.el-carousel__item) {
    border-radius: 8px;
    overflow: hidden;
    
    &.is-active {
      .banner-image {
        transform: scale(1.05);
      }
    }
  }

  .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .banner-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-size: 14px;
  }

  :deep(.el-carousel__arrow) {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }

  :deep(.el-carousel__indicators) {
    bottom: -20px;
    
    .el-carousel__button {
      width: 30px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}

.rank-section {
  margin: 0;
  width: auto;

  .rank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }

    .more {
      color: #999;
      font-size: 13px;
      cursor: pointer;
    }
  }

  .rank-list {
    display: flex;
    flex-direction: column;
    gap: 32px;

    .rank-item {
      display: flex;
      gap: 20px;

      .rank-icon-wrapper {
        flex-shrink: 0;
        width: 120px;
        height: 120px;

        .rank-icon {
          width: 100%;
          height: 100%;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 24px;
          font-weight: bold;

          &.bg-1 {
            background-color: #fdb553;
          }
          &.bg-2 {
            background-color: #7bb3ea;
          }
          &.bg-3 {
            background-color: #b595cf;
          }

          .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
            cursor: pointer;

            i {
              font-size: 20px;
              color: #2d8cf0;
            }
          }
        }
      }

      .song-list {
        flex: 1;
        padding: 8px 0;

        .song-item {
          display: flex;
          align-items: center;
          height: 32px;

          .song-index {
            width: 24px;
            color: #999;
            font-size: 14px;
          }

          .song-name {
            flex: 1;
            color: #333;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}

.sub-sections {
  margin-top: 20px;
  min-width: 0;

  .new-songs-and-mv {
    display: flex;
    gap: 20px;
  }

  .new-songs-section {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    max-width: 900px;

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      h2 {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-right: 40px;
      }

      .category-tabs {
        flex: 1;
        display: flex;
        gap: 24px;

        .tab {
          font-size: 14px;
          color: #666;
          cursor: pointer;
          position: relative;
          padding: 4px 12px;
          border-radius: 15px;
          transition: all 0.3s ease;

          &.active {
            color: #fff;
            background-color: #2d8cf0;
            font-weight: 500;

            .iconfont {
              margin-left: 4px;
              font-size: 12px;
            }
          }

          &:hover {
            color: #2d8cf0;
            
            &:not(.active) {
              background-color: rgba(45, 140, 240, 0.1);
            }
          }
        }
      }

      .page-info {
        color: #999;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;

        .iconfont {
          cursor: pointer;
          transition: color 0.3s;

          &.disabled {
            color: #ccc;
            cursor: not-allowed;
          }

          &:not(.disabled):hover {
            color: #2d8cf0;
          }
        }
      }
    }

    .songs-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, 60px);
      gap: 12px 24px;

      .song-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background-color 0.2s;
        cursor: pointer;

        &:hover {
          background-color: #f5f5f5;

          .song-cover {
            img {
              transform: scale(1.1);
            }
          }

          .song-info {
            .song-title {
              color: #2d8cf0;
            }
          }
        }

        .song-cover {
          width: 44px;
          height: 44px;
          border-radius: 4px;
          overflow: hidden;
          margin-right: 12px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
          }

          .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            i {
              font-size: 12px;
              color: #2d8cf0;
            }
          }

          &:hover {
            img {
              transform: scale(1.1);
            }
          }
        }

        .song-info {
          flex: 1;
          min-width: 0;
          margin-right: 16px;

          .song-title {
            font-size: 14px;
            color: #333;
            @include text-ellipsis;
            transition: color 0.3s ease;
          }

          .song-artist {
            font-size: 12px;
            color: #999;
            @include text-ellipsis;
          }
        }

        .song-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-left: auto;

          .play-btn, .download-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            cursor: pointer;
            border-radius: 50%;
            background-color: #f5f5f5;
            transition: all 0.3s ease;

            i {
              font-size: 16px;
              display: block;
              line-height: 1;
            }

            &:hover {
              color: #2d8cf0;
              background-color: #e6f3ff;
              transform: scale(1.1);
            }
          }

          .download-btn {
            i {
              position: relative;
              top: 1px;
            }
          }
        }
      }
    }
  }

  .mv-section {
    width: 350px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      h2 {
        font-size: 24px;
        font-weight: 600;
        color: #333;
      }

      .more {
        color: #999;
        font-size: 13px;
        cursor: pointer;

        &:hover {
          color: #2d8cf0;
        }
      }
    }

    .mv-list {
      .mv-card {
        position: relative;
        cursor: pointer;
        margin-bottom: 20px;

        .mv-cover {
          position: relative;
          width: 100%;
          border-radius: 8px;
          overflow: hidden;
          
          &::before {
            content: '';
            display: block;
            padding-top: 65%;
          }

          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
          }

          .mv-info {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 12px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: #fff;

            .mv-title {
              font-size: 14px;
              margin-bottom: 4px;
              @include text-ellipsis;
            }

            .mv-artist {
              font-size: 12px;
              opacity: 0.8;
              @include text-ellipsis;
            }
          }

          .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9) !important;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2d8cf0 !important;
            font-size: 20px !important;
            opacity: 0;
            transition: opacity 0.3s;
          }
        }

        &:hover {
          .mv-cover img {
            transform: scale(1.1);
          }

          .play-btn {
            opacity: 1;
          }
        }
      }

      .small-mv-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }
  }
}

/* 修改小卡片样式 */
.playlist-card.small {
  .playlist-cover {
    position: relative;
    overflow: hidden;

    img {
      transition: transform 0.3s ease;
    }

    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 2;
      cursor: pointer;

      i {
        font-size: 20px;
        color: #2d8cf0;
      }
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }
  }

  &:hover {
    .playlist-cover {
      img {
        transform: scale(1.1);
      }

      .play-btn {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      .mask {
        opacity: 1;
      }
    }
  }
}

/* 统一所有播放按钮的基础样式 */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
  cursor: pointer;

  i {
    font-size: 20px;
    color: #2d8cf0;
  }
}

/* 统一所有遮罩层样式 */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
</style>
